<template>
  <div>
    {{txt}}
  </div>
</template>
<script>
import Lyric from 'lyric-parser'
import { getLyric } from "./service"

export default {
  data() {
    return {
      txt:'暂无歌词'
    }
  },
  props:['mid','isPaused'],
  methods: {
    seek(time) {
      if(!this.LyricObj) return 
      this.LyricObj.stop();
      this.LyricObj.seek(time * 1000)
    },
    async getLyric(songmid) {
      const {code, result:{ lyric }} = await getLyric(songmid)
      if(code) return 
      // 检测是否有已存在的播放器 有的话停掉
      if(this.LyricObj) this.LyricObj.stop();
      this.LyricObj = new Lyric(lyric,({txt}) => {
        this.txt =txt
        console.log(txt)
      })
      this.LyricObj.play()
    }
  },
  watch: {
    mid: {
      immediate: true,
      handler(newMid,oldMid) {
        if(newMid === oldMid) return 
        this.getLyric(newMid)
      }
    },
    isPaused(newVal,oldVal) {
      console.log('播放状态改变',newVal, oldVal)
      this.LyricObj.togglePlay()
    }
  },
  // eslint-disable-next-line vue/no-deprecated-destroyed-lifecycle
  beforeDestroy() {
    if(this.LyricObj) {
      this.LyricObj.stop()
    }
  }
}
/*
1. 通过网络请求获取歌词
2. 解析歌词
3. 歌词的操作 开始 停止 暂停 快进
4. 和歌曲 （进度条） 联动
5. 注意和歌曲联动的异步问题
*/ 
</script>
<style lang="less" scoped>

</style>